<template>
  <!-- 客户视图-客户详情 -->
	<div class="app-container">
		<el-tabs type="card" v-model="activeName">
      <div class="mb20">
        <summaryInfo></summaryInfo>
      </div>
      <el-tab-pane name="1" label="基本信息">
        <baseInfo v-if="activeName == '1'"></baseInfo>
      </el-tab-pane>
      <el-tab-pane name="2" label="业务分析">
        <businessAnalysis v-if="activeName == '2'" :custInfo="custInfo" :type="activeName"></businessAnalysis>
      </el-tab-pane>
      <el-tab-pane name="3" label="风险分析">
        <riskProfile></riskProfile>
      </el-tab-pane>
      <el-tab-pane name="4" label="客户关系">
        <customerRelationship></customerRelationship>
      </el-tab-pane>
      <el-tab-pane name="5" label="价值视图">
        <valueView></valueView>
      </el-tab-pane>
      <el-tab-pane name="6" label="企业画像">
        <corporatePortrait></corporatePortrait>
      </el-tab-pane>
      <el-tab-pane name="7" label="营销洞察">
        <marketingInsight></marketingInsight>
      </el-tab-pane>
    </el-tabs>
	</div>
</template>

<script setup name="corporateClient">
  import summaryInfo from "../../../components/SummaryInfo.vue"
  import baseInfo from "../baseInfo/index.vue"
  import { provide } from "vue"

 const businessAnalysis = defineAsyncComponent(()=>import('../businessAnalysis/index.vue'))
 const customerRelationship = defineAsyncComponent(()=>import('../customerRelationship/index.vue'))
 const valueView = defineAsyncComponent(()=>import('../valueView/index.vue'))
 const corporatePortrait = defineAsyncComponent(()=>import('../corporatePortrait/index.vue'))
 const marketingInsight = defineAsyncComponent(()=>import('../marketingInsight/index.vue'))
 const riskProfile = defineAsyncComponent(()=>import('../riskProfile/index.vue'))

  const isOpen = ref(true)
  const activeName = ref('1')
  const data = reactive({
    custInfo: {
      custName: '中国建筑工程有限公司',
      certType: '统一社会信用代码',
      certNo: '9123456789012321',
      updateTime: '2024.01.01',
      orgNo: '2312231232',
      regNo: '31092389099089',
      otherNo: '1231231239090',
      city: '上海市徐汇区',
      address: '上海市徐汇区',
      operName: '张三',
      type: '股权有限公司',
      industryAll: '建筑业/房屋建筑',
      industryOne: '建筑业',
      industryTwo: '房屋建筑',
      oneOrgName: '中国建筑工程有限公司',
      topOrgName: '中国建筑工程有限公司',
      clientName: '中国建筑工程有限公司',
      section: '大型商业客户一处',
      vipCode: 'VIP000000000121',
      branchName: '上海分公司',
      flag: '存量客户',
      qxAuth: '是',
      attributionHierarchy: '重客一级',
      oneCustName: '中国建筑工程有限公司',
      khgllx: '总对总客户',
      qtjg: '上海分公司',
      tbdm: '080801',
      jydq: '上海、北京、广州、黑龙江...',
      ldjg: '上海分公司、北京分公司',
      clsyxzsyx: '城市公交、租赁车、出租车...',
      clsyxzjqx: '企业用车、出租租赁用车...',
      zlzlsyx: '6座以下客车、特种车一...',
      zlzljqx: '6座以下客车、特种车一...',
      customerAbbreviation: '中国建工',
      historicalName: '中国建筑工程有限公司',
      orgType: '法人企业',
      status: '存续(在营、开业、在册)',
      mainUnit: '上海市工商局',
      establishTime: '2000-01-01',
      operatingTerm: '2030-01-01',
      dateApproval: '2024-01-01',
      typeLegalPerson: '企业法人',
      registrationAuth: '上海市市场监督管理局',
      NumEmployees: '200',
      registeredCapital: '5000万',
      legalRepresentative: '王XX',
      legalRepresentativeType: '个人',
      companyRepresentativePosition: '法定代表人',
      address: '上海市XX区XX路XX号',
      businessScope: '电分工程、环经工程、智能化工程、桥梁及隧道工程、园林绿化工程施工、建筑劳务分',
      topShareholding: '51%',
      equityHierarchy: '四级',
      num1: '6',
      num2: '11',
      num3: '0',
      num4: '1',
      num5: '2',
      num6: '3',
    },
  })
  const { custInfo } = toRefs(data)

  provide('custInfo', custInfo.value)

</script>

<style lang="scss" scoped>
.updateTime {
  color: gray;
  font-size: 14px;
}

.custName {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  align-items: flex-end;
  color: #3A71A8;
  .code {
    color: gray;
    font-size: 14px;
    font-weight: 400;
    margin-left: 20px;
    .label {
      font-weight: 500;
    }
  }
}
.tag_box {
  margin: 10px 100px 20px;
}
.item_box {
  overflow: hidden;
  position: relative;
  transition: all .5s;
  .isOpen {
    position: absolute;
    bottom: 10px;
    right: 20px;
  }
}
</style>